<template>
  <div class="home">
    <!-- <div id="aplayer"></div> -->
    <el-row id="artList" type="flex" justify="space-around">
      <el-col :span="16">
        <el-row class="art-item" v-for="item in tableData" :key="item.id">
          <el-card shadow="hover">
            <h5>
              <router-link
                :to="{ path: '/article', query: { aid: item.id } }"
                tag="span"
                class="art-title"
                ><strong>{{ item.title }}</strong></router-link
              >
            </h5>
            <el-row
              class="art-info d-flex align-items-center justify-content-start"
            >
              <div class="art-time">
                <i class="el-icon-time"></i>：{{ item.dateTime }}
              </div>
              <div class="d-flex align-items-center">
                <img class="tag" src="../assets/tag.png" />：
                <el-tag size="mini">{{ item.tname }}</el-tag>
              </div>
            </el-row>
            <el-row class="art-body">
              <div class="side-img hidden-sm-and-down">
                <img class="art-banner" :src="item.icon" />
              </div>
              <div class="side-abstract">
                <div class="art-abstract">
                  {{ item.description }}
                </div>
                <div class="art-more">
                  <router-link
                    :to="{ path: '/article', query: { aid: item.id } }"
                    tag="span"
                  >
                    <el-button plain>{{ $t("home.readMore") }}</el-button>
                  </router-link>
                  <div class="view">
                    <i class="el-icon-view"></i>{{ item.viewsNum }}
                  </div>
                </div>
              </div>
            </el-row>
          </el-card>
          <!-- <img class="star" src="../assets/star.png" /> -->
        </el-row>

        <div class="block pagination">
          <el-pagination
            @current-change="currentChange"
            @size-change="sizeChange"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="3"
            :current-page="page"
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="6" class="hidden-sm-and-down" id="side">
        <div class="right-container">
          <tag></tag>
          <friend></friend>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import friend from "../components/friend";
import tag from "../components/tag";
import bus from "../eventbus";
// import 'APlayer/dist/APlayer.min.css';
// import APlayer from 'APlayer';
export default {
  name: "home",
  components: {
    friend,
    tag,
  },
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      size: 3,
      keyword: "",
    };
  },
  created() {
    this.showMd();
  },
  methods: {
    async showMd() {
      const _this = this;
      this.$axios
        .get(
          "http://121.43.152.1:8081/queryAllArticleByPage?page=" +
            this.page +
            "&size=" +
            this.size +
            "&title=" +
            this.keyword
        )
        // .get("http://localhost:8081/queryAllArticleByPage?page="+this.page+"&size="+this.size+"&title="+this.keyword)

        .then(function (res) {
          const { code, data, num } = res.data;
          code === 0 && ((_this.tableData = data), (_this.total = num));
        });
    },
    sizeChange(pageSize) {
      // console.log('pageSize:'+pageSize)
      this.size = pageSize;
      this.showMd();
    },
    currentChange(currentPage) {
      // console.log('currentPage:'+currentPage)
      this.page = currentPage;
      this.showMd();
    },
  },
  mounted() {
    bus.$on("msg", (msg) => {
      this.keyword = msg;
      this.page = 1;
      this.size = 3;
      this.showMd();
    });
    // const options = {
    // 		container: document.getElementById('aplayer'),
    // 			audio: [{
    // 				name: 'name',
    // 				artist: 'artist',
    // 				url: '../assets/musics/123.mp3',
    // 				cover: 'logo.png'
    // 			},
    // 			]
    // }
    // 	const ap = new APlayer(options);
  },
};
</script>

<style scoped>
/* 标题应该更贴紧内容，并与其他块区分，margin 值要相应做优化 */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1;
  font-family: Arial, sans-serif;
  margin: 1.4em 0 0.8em;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.6em;
}
h3 {
  font-size: 1.4em;
}
h4 {
  font-size: 1.2em;
}
h5,
h6 {
  font-size: 1em;
}

/* 现代排版：保证块/段落之间的空白隔行 */
.typo p,
.typo pre,
.typo ul,
.typo ol,
.typo dl,
.typo form,
.typo hr {
  margin: 1em 0 0.6em;
}
#side .item {
  margin-bottom: 30px;
}

.art-item {
  margin-bottom: 30px;
  position: relative;
}

.art-item .star {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  right: 0;
}

img.tag {
  width: 16px;
  height: 16px;
}

.right-container {
  position: sticky;
  top: 70px;
}

.art-title {
  border-left: 3px solid #f56c6c;
  padding-left: 5px;
  cursor: pointer;
}

.art-title:hover {
  padding-left: 10px;
  color: #409eff;
}

.art-time {
  margin-right: 20px;
}

.art-body {
  display: flex;
  padding: 10px 0;
}

.side-img {
  height: 150px;
  width: 270px;
  overflow: hidden;
  margin-right: 10px;
}

img.art-banner {
  width: 100%;
  height: 100%;
  transition: all 0.6s;
}

img.art-banner:hover {
  transform: scale(1.4);
}

.side-abstract {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.art-abstract {
  flex: 1;
  color: #aaa;
}

.art-more {
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.art-more .view {
  color: #aaa;
}
h5 {
  font-size: 18px;
}
.pagination {
  /* background-color: #f9f9f9; */
}
</style>